<jsp:directive.page contentType="text/html;charset=utf-8" />
<%@ include file="/taglibs.jsp" %>



<head>
	<title>User Details</title>
	<style type="text/css">
		ul#thumblist{display:block;}
		ul#thumblist li{float:left;margin-right:2px;list-style:none;}
		ul#thumblist li a{display:block;border:1px solid #CCC;}
		ul#thumblist li a.zoomThumbActive{
		    border:1px solid red;
		}
	</style>
	<link rel="stylesheet" href="${ctx}/scripts/jqroom/jquery.jqzoom.css" type="text/css" media="screen" />
	<script src="${ctx}/scripts/jqroom/jquery.jqzoom-core.js" type="text/javascript"></script>
</head>
<body>


<div class="row">
	<div class="span3">
				<s:if test="%{null == product.productImages || product.productImages.isEmpty()}">
					<img alt="" src="${ctx}/themes/common/images/no_image.png" ></img>
				</s:if>
				<s:else>
					<div class="clearfix zoom">
					<a href="${product.productImages[0].image.originalImageUrl}" class="ZOOM" title="Product Image" rel="gal1">  
						<img id="zoomPadImg" src="${product.productImages[0].image.mediumImageUrl}"  title="Product Image">  
					</a>
					</div>
					<ul id="thumbList" class="thumbnails">
					<s:iterator value="product.productImages" status="piStatus">
						<li>
							<a class="thumbnail" <s:if test="#piStatus.first == true">class="zoomThumbActive" id="primaryImage"</s:if>
								href="javascript:void(0);" 
								rel="{gallery: 'gal1', smallimage: '${image.mediumImageUrl}',largeimage: '${image.originalImageUrl}'}">  
							    <img src="${image.smallImageUrl}">  
							</a>
						</li>
					</s:iterator>
					</ul>
				</s:else>
				<div class="clearfix">
				product for: <s:text name="product.internalName" /><br/>
				(Code: <s:text name="product.productCode" />)</div>
	</div>
	<div class="span9">

	<div id="tabs">
		<ul>
			<li><a href="#tabs-1"><s:text name="module.product.tab.main"/></a></li>
			<li><a href="#tabs-2"><s:text name="module.product.tab.packing"/></a></li>
			<li><a href="#tabs-3"><s:text name="module.product.tab.features"/></a></li>
			<li><a href="#tabs-4"><s:text name="module.product.tab.catalogs"/></a></li>
			<li><a href="#tabs-5"><s:text name="module.product.tab.contents"/></a></li>
			<li><a href="#tabs-6"><s:text name="module.product.tab.suppliers"/></a></li>
			<li><a href="#tabs-7"><s:text name="module.product.tab.accounts"/></a></li>
			<li><a href="#tabs-8"><s:text name="module.product.tab.keywords"/></a></li>
		</ul>
		<%----%>
		<div id="tabs-1">
		<%----%>
			<%@ include file="tabs/viewProductMain.jsp" %>
			 
		</div>
		<div id="tabs-2">
		</div>
		<div id="tabs-3">
		<%-- --%>
			<%@ include file="tabs/viewProductFeatures.jsp" %>
		 
		</div>
		<div id="tabs-5">
			<%@ include file="tabs/viewContents.jsp" %>
		</div>
		
	</div>
	<div class="ui-helper-clearfix" style="text-align: center">
		<button id="previous" class="btn"><s:text name="button.previous"/></button>
		<button id="update" class="btn btn-primary"><s:text name="button.update"/></button>
		<button id="delete" class="btn"><s:text name="button.delete"/></button>
		<button id="next"  class="btn"><s:text name="button.next"/></button>
	</div>
</div>
</div>
<script type="text/javascript">


		$(function() {
			$("#edit").click(function(){window.location='user!edit.action?product.id=<s:text name="product.id"/>';});
			$("#update").click(function(){
				if($("#newForm").valid()) {
					newForm.action="product!create.action";
					newForm.submit();
				}});
			$("#delete").click(function(){if(confirm("Are you sure?"))window.location='user!delete.action?jq.id=<s:text name="product.id"/>';});
			//$( "#tabs" ).tabs();
			$( "#tabs" ).tabs({
				ajaxOptions: {
					error: function( xhr, status, index, anchor ) {
						$( anchor.hash ).html(
							"Couldn't load this tab. We'll try to fix this as soon as possible. " +
							"If this wouldn't be a demo." );
					}
				}
			});
			
			$('.ZOOM').jqzoom({      
					zoomType: 'standard',
		            lens:true,
		            zoomWidth: 450,  
		            zoomHeight: 310,
		            preloadImages: false});
		});
		$('#etalage').etalage({
			smallthumb_inactive_opacity: 0.3,
			smallthumbs_position: 'bottom',
			show_icon: false,
			autoplay: false,
			keyboard: false,
			zoom_easing: false
		});
	
	</script>
</body>
